<template>
  <div class="searchResult">
    <!-- 导航栏 -->
    <navBar>
      <template #center>搜索结果 </template>
      <template #left
        ><van-icon @click="$router.push('/search')" name="arrow-left" />
      </template>
    </navBar>
    <!-- 搜索内容 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="content">
        <div class="item" v-for="(item, index) in comArr" :key="index">
          <div class="title">
            <div
              class="actile"
              :class="{ changewidth: item.cover.images.length > 2 }"
            >
              {{ item.aut_name }}
            </div>
            <div
              v-for="(item1, index) in item.cover.images"
              :key="index"
              v-show="item.cover.images.length"
              class="img"
            >
              <img :src="item1" alt="" />
            </div>
          </div>
          <div class="comment">
            <span>{{ item.title }}</span>
            <span>{{ item.comm_count }}评论</span>
            <span>{{ item.pubdata | dayjsFilter }}</span>
          </div>
          <div class="func">
            <div @click="$router.push(`/detail/${item.art_id}`)">
              <van-icon name="comment-o" /><span>评论</span>
            </div>
            <div @click="$router.push(`/detail/${item.art_id}`)">
              <van-icon name="like-o" /><span>点赞</span>
            </div>
            <div><van-icon name="share-o" /><span>分享</span></div>
          </div>
        </div>
      </div>
    </van-list>
    <back-top :distance="1000" />
  </div>
</template>

<script>
import { searchRestult } from '../../api/search'
export default {
  data () {
    return {
      // 页数
      page: 0,
      // 每页十条
      per_page: 10,
      // 评论总条数
      comArr: [],
      // 总共条数
      total: '',
      // 控制是否正在加载,false为不是
      loading: false,
      // 控制还是否可以加载
      finished: false
    }
  },
  mounted () {},
  methods: {
    // 发起搜索结果的请求
    async searchRestult () {
      // 页数每调用一次+1
      this.page++
      const res = await searchRestult({
        page: this.page,
        per_page: this.per_page,
        q: this.$route.params.key
      })
      // 保存请求数据
      this.comArr = [...res.data.results, ...this.comArr]
      this.total = this.total ? res.data.total_count : this.total
      this.loading = false
      // 若请求到的条数大于等于总条数,则结束
      if (this.page * this.per_page >= 50) {
        this.finished = true
      }
    },
    onLoad () {
      this.searchRestult()
    }
  }
}
</script>

<style lang="less" scope>
.searchResult {
  .left {
    .van-icon {
      margin-top: 15px;
    }
  }
  .content {
    margin-top: 46px;
    background-color: #f9f9f9;
    font-size: 14px;
    .item {
      background-color: #fff;
      margin-top: 20px;
      padding: 5px 0;
      .title {
        display: flex;
        flex-wrap: wrap;
        font-size: 18px;
        margin-left: 10px;
        margin-bottom: 15px;
        .actile {
          margin-top: 10px;
          flex: 60%;
        }
        .changewidth {
          flex: 70%;
        }
        .img {
          flex: 30%;
          height: 60px;
          margin-top: 10px;
          margin-right: 10px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .comment {
        margin-left: 10px;
        margin-right: 10px;
        color: #b3c5c4;
        span {
          margin-right: 10px;
        }
      }
      .func {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 5px;
        div {
          flex: 1;
          border-top: 1px solid #eee;
          font-size: 14px;
          padding: 10px 0;
          border-right: 1px solid #eee;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          i {
            margin-right: 5px;
          }
        }
      }
    }
  }
}
</style>
